<template>
    <div v-loading="loading">
        <div class="searchBox">
            <el-form :inline="true" ref="form" :model="formData">

                <el-button
                        icon="el-icon-arrow-left"
                        round
                        @click="handleBackFactorList"
                        type="primary">
                    返回厂家列表
                </el-button>

                <el-form-item label="分类" style="margin-left: 100px;">
                    <el-select v-model="classValue" placeholder="请选择">
                        <el-option
                                v-for="item in classData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handleSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>
                <el-button
                        type="danger"
                        style="float: right"
                        icon="el-icon-shopping-cart-full"
                        circle
                        @click="handleJumpShoppingCar"
                ></el-button>

            </el-form>

        </div>
        <div class="tableBox">
            <el-table :data="list" border style="width: 1360px">
                <el-table-column prop="thumbnail" label="商品图片" width="180" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumbnail" class="goodsImage"/>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="250" align="center">
                </el-table-column>
                <el-table-column prop="class_name" label="商品分类" width="180" align="center">
                </el-table-column>
                <el-table-column prop="purchase_price" label="批发价" width="180" align="center">
                </el-table-column>
                <el-table-column prop="selling_price" label="零售价" width="180" align="center">
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="180" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info">商品信息</el-button>
                        <el-button @click="handleGoShop(scope.row.id)" size="mini" type="success">添加购物车</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog width="1200px" title="添加购物车" :visible.sync="goShopVisible">
            <el-table :data="goodsSkuList" width="100%">
                <el-table-column property="goods_name" align="center" label="商品名称" width="600">
                </el-table-column>
                <el-table-column property="sku_value" align="center" label="规格" width="400">
                </el-table-column>
                <el-table-column width="100" align="center" label="数量">
                    <template scope="scope">
                        <el-input v-model="scope.row.quantity"></el-input>
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="goShopVisible = false">取 消</el-button>
                <el-button type="primary" @click="addShopCar">确 定</el-button>
            </div>
        </el-dialog>

        <div class="goodsPage">
            <el-pagination
                    v-if="goodsPageVisible"
                    background
                    layout="prev, pager, next"
                    :page-size="5"
                    :total="total"
                    @current-change="handlePage"
            >

            </el-pagination>
        </div>

    </div>
</template>

<script>

    export default {
        name: 'factoryGoodsList',
        data() {
            return {
                list: [],
                loading: false,
                fit: 'contain',
                formData: {
                    cid: ''
                },
                classData: [],
                classValue: '',
                goShopVisible: false,
                goodsSkuList: [],
                goodsId: '',
                goodsPageVisible: true,
                total: 0
            }
        },
        methods: {
            //初始化厂家商品数据
            defaultData(cid,page) {
                this.loading = true;
                this.$http.get('/web/good/list', {
                    params: {
                        pageSize: 5,
                        token: localStorage.getItem('user_token'),
                        p_id: this.$route.query.p_id,
                        mill_id: this.$route.query.mill_id,
                        status: 2,
                        cid: cid,
                        page: page
                    }
                }).then((response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                        if (response.data.data.pagination.total <= 5){
                            this.goodsPageVisible = false
                        }
                    }
                    this.loading = false;
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                }))
            },

            //初始化商品分类数据
            defaultClassData() {
                this.loading = true;
                this.$http.get('/web/good/classify', {
                    params: {
                        token: localStorage.getItem('user_token'),
                    }
                }).then((response => {
                    if (response.data.status === 'success') {
                        this.classData = response.data.data;
                    }
                    this.loading = false;
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                }))
            },

            //搜索
            handleSearch() {
                if (this.classValue && this.classValue !== '') {
                    this.defaultData(this.classValue)
                }
            },
            //重置
            handleReset() {
                this.classValue = '';
                this.defaultData();
            },

            //返回厂家列表
            handleBackFactorList() {
                this.$router.push({name: 'factoryList'})
            },

            //获取商品规格数据
            handleGoShop(id) {
                this.loading = true;
                this.$http.get('/agent/turnover/sku/list', {
                    params: {
                        token: localStorage.getItem(('user_token')),
                        id: id
                    }
                }).then((response => {

                    if (response.data.status === 'success') {
                        this.goodsSkuList = response.data.data;
                        this.goShopVisible = true;
                        this.goodsId = id;
                    }

                    this.loading = false;
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                }))
            },

            //添加购物车
            addShopCar() {
                var data = [];
                for (let i =0; i< this.goodsSkuList.length; i++) {
                    if (this.goodsSkuList[i].quantity){
                        data.push(this.goodsSkuList[i]);
                    }
                }
                this.loading = true;
                this.$http.post('/agent/turnover/cart/add', {
                    id: this.goodsId,
                    agent_id: localStorage.getItem('user_id'),
                    p_id: this.$route.query.p_id,
                    mill_id: this.$route.query.mill_id,
                    token: localStorage.getItem('user_token'),
                    cart_data: JSON.stringify(data)
                }).then((response => {
                    if (response.data.status === 'success') {
                        this.$alert('添加购物车成功，请到右上角购物车查看', '添加成功', {
                            confirmButtonText: '确定',
                        });
                    }
                    this.loading = false;
                    this.goShopVisible = false;
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                    this.goShopVisible = false;
                }))
            },

            //分页回调
            handlePage(page){
                this.defaultData('',page);
            },


            //购物车跳转
            handleJumpShoppingCar(){
                this.$router.push({
                    name: 'factoryShoppingCar',
                    query:{
                        p_id: this.$route.query.p_id,
                        mill_id: this.$route.query.mill_id,
                        agent_id: localStorage.getItem('user_id')
                    }
                })
            }
        },
        mounted() {
            this.defaultData();
            this.defaultClassData();
        }
    }
</script>

<style>
    .goodsImage {
        width: 110px;
        height: 70px;
    }

    .tableBox {
        margin-left: 40px;
    }

    .searchBox {
        height: 80px;
        width: 1360px;
        margin-left: 40px;
        margin-top: 40px;
    }

    .goodsPage{
        text-align: center;
        margin-top: 50px;
    }
</style>
